/* eslint-disable no-unreachable */
<template>
  <div id="app">
    <h1 style="margin-bottom: 10px; text-align: center">凯京技术博客2019年度报告</h1>
    <!-- <h2>1. 概览</h2> -->
    <Row :gutter="15" class="card__row">
      <i-col span="12">
        <Card :border="false" dis-hover shadow>共发布<br><span id="blogCount"></span>篇</Card>
      </i-col>
      <i-col span="12">
        <Card :border="false" dis-hover shadow>总访问<br><span id="visitCount"></span>次</Card>
      </i-col>
    </Row>
    <br>
    <Row :gutter="15" class="card__row">
      <i-col span="12">
        <Card :border="false" dis-hover shadow>总字数<br><span id="wordCount"></span></Card>
      </i-col>
      <i-col span="12">
        <Card :border="false" dis-hover shadow>投稿人数<br><span id="authorCount"></span>人</Card>
      </i-col>
    </Row>
    <!-- <h2>2. 热门博文Top10榜单</h2> -->

    <Card :border="false" dis-hover shadow class="card__list order-wrapper">
      <h4 slot="title">热门博文Top10榜单</h4>
      <div class="order-item" v-for="(item, index) in top10Data" :key="index">
         <div class="title"><a target="_blank" :href="item.url">{{item.title}}</a></div>
         <div class="artical">
           <span>作者: {{item.author}}</span>
           <span>字数: {{item.wordCount}}</span>
           <span class="time">发布时间: {{item.pubDate}}</span>
         </div>
         <div class="info">
           <span>访问: <strong>{{item.visitCount}}</strong></span>
           <span>评论: <strong>{{item.commentCount}}</strong></span>
           <span>点赞: <strong>{{item.starCount}}</strong></span>
           <span>收藏: <strong>{{item.favoriteCount}}</strong></span>
         </div>
      </div>

    </Card>
    <!-- <div class="order-wrapper">
    </div> -->
    <!-- <br/> -->
    <!-- <h2>3. 作者榜单</h2> -->
    <Row :gutter="15">
      <i-col span="24">
        <Card :border="false" dis-hover shadow style="margin-top: 20px; height: 612px">
          <h4 slot="title">作者榜单</h4>
          <ButtonGroup>
            <Button @click="changePieDimension('author', 'visitCount')">访问量</Button>
            <Button @click="changePieDimension('author', 'favoriteCount')">收藏</Button>
            <Button @click="changePieDimension('author', 'commentCount')">评论</Button>
            <Button @click="changePieDimension('author', 'starCount')">点赞</Button>
            <Button @click="changePieDimension('author', 'wordCount')">字数</Button>
          </ButtonGroup>
          <div ref="pieChart"></div>
        </Card>
      </i-col>
      <i-col span="24">
        <Card :border="false" dis-hover shadow style="margin-top: 20px; height: 612px">
          <h4 slot="title">月度发文数量统计</h4>
          <div ref="columnChart"></div>
        </Card>
      </i-col>
    </Row>
    <!-- <br/> -->
    <!-- <h2>4. 月度发文数量统计</h2> -->
  </div>
</template>

<script>
import data from './data/data'
import { CountUp } from 'countup.js'
import PieChart from './mixins/pieChart'
import DataSet from '@antv/data-set'
import ColumnChart from './mixins/columnChart'
import { dateFormat } from './utils'
import _ from 'lodash'
export default {
  name: 'app',
  mixins: [PieChart, ColumnChart],
  data () {
    return {
      data: data,
      top10Data: this.getTop10Data(),
      pieChart: undefined
    }
  },

  mounted () {
    const blogCount = new CountUp('blogCount', this.data.length)
    const visitCount = new CountUp('visitCount', this.data.map(r => r.visitCount).reduce((a, b) => a + b), 0)
    const wordCount = new CountUp('wordCount', this.data.map(r => r.wordCount).reduce((a, b) => a + b), 0)
    const authorSet = new Set()
    for (let blog of this.data) {
      authorSet.add(blog.author)
    }
    const authorCount = new CountUp('authorCount', authorSet.size)
    blogCount.start()
    visitCount.start()
    wordCount.start()
    authorCount.start()
    this.changePieDimension('author', 'visitCount')
    this.changeColumnDimension()
  },
  methods: {
    changePieDimension (type, value) {
      const dv = new DataSet().createView().source(this.data)
      dv.transform({
        type: 'percent',
        field: value,
        dimension: type,
        as: 'percent'
      })
      this.pieChart = this.drawPie(this.pieChart, dv, this.$refs.pieChart, type, value)
    },
    changeColumnDimension () {
      const dv = new DataSet().createView().source(this.data)
      dv.transform({
        type: 'map',
        callback (row) {
          row.yearMonth = dateFormat(row.pubDate, 'yyyy-MM')
          return row
        }
      })
      const res = _.groupBy(dv.rows, m => m.yearMonth)
      const array = this.sortByYearMonth(res)
      this.drawColumn(array, this.$refs.columnChart, 'yearMonth', 'count')
    },
    getTop10Data () {
      const array = data.sort((a, b) => b.visitCount - a.visitCount).slice(0, 10)
      return array
    },
    compare (property) {
      return function (a, b) {
        var value1 = a[property]
        var value2 = b[property]
        return value1 - value2
      }
    },
    sortByYearMonth (res) {
      let array = []
      let map = {}
      let yearMonthArray = []
      for (const item in res) {
        const obj = {
          yearMonth: item,
          count: res[item].length
        }
        array.push(obj)
        yearMonthArray.push(item)
        map[item] = obj
      }
      yearMonthArray.sort()
      let newArray = []
      for (const yearMonthStr of yearMonthArray) {
        newArray.push(map[yearMonthStr])
      }
      return newArray
    }
  }
}
</script>

<style lang="scss">
  * {
    margin: 0;
    padding: 0;
  }
  #app {
    padding: 20px;
    background-color: #f0f2f5!important;
  }
  .card__row {
    text-align: center;
    color: rgba(0, 0, 0, .65);
    span {
      display: inline-block;
      margin: 0 4px;
      font-size: 30px;
      /* font-weight: bolder; */
    color: rgba(0, 0, 0, .85);
    }
  }
  .card__list {
    margin-top: 20px;
    .title {
      margin-bottom: 12px;
    /* color: rgba(0,0,0,.85); */
      font-size: 16px;
      line-height: 24px;
    }
  }
  .ivu-list-bordered .ivu-list-header{
    padding-right: 20px;
    padding-left: 20px;
  }
  .order-wrapper{
    padding: 0 20px;
    /* margin-top: 10px; */
    .order-item:not(:last-child){
      border-bottom: 1px solid #ddd;
      padding-bottom: 10px;
      margin-bottom: 10px;
    }

    .artical{
      color: #888;
      margin-bottom: 6px;
      font-size: 13px;
      span{
        margin-right: 15px;
      }
    }
    .title{
      font-size: 16px;
      font-weight: bold;
    }
    .author{
      font-weight: bold;
    }
    .info{
      color: #666;
      span{
        margin-right: 15px;
      }
    }
  }
</style>
